<template>
  <div class="movie-list">
    <div class="header">
      <h1>电商列表</h1>
      <el-button 
        v-if="userStore.isLoggedIn" 
        type="primary" 
        @click="navigateToCreate"
      >
        添加电商
      </el-button>
    </div>
    
    <div class="filter">
      <el-input
        v-model="searchQuery"
        placeholder="搜索电商..."
        clearable
      />
    </div>
    
    <div class="grid">
      <MovieCard
        v-for="movie in filteredMovies"
        :key="movie.id"
        :movie="movie"
        @click="viewDetail(movie.id)"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../stores/user'
import { movieApi } from '../../utils/api'
import MovieCard from '../../components/MovieCard.vue'

export default {
  components: { MovieCard },
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const movies = ref([])
    const searchQuery = ref('')

    const filteredMovies = computed(() => {
      return movies.value.filter(movie => 
        movie.title.toLowerCase().includes(searchQuery.value.toLowerCase())
      )
    })

    onMounted(async () => {
      const response = await movieApi.getList()
      movies.value = response.data
    })

    const viewDetail = (id) => {
      router.push({ name: 'MovieDetail', params: { id } })
    }

    const navigateToCreate = () => {
      router.push({ name: 'MovieCreate' })
    }

    return {
      userStore,
      movies,
      searchQuery,
      filteredMovies,
      viewDetail,
      navigateToCreate
    }
  }
}
</script>

<style scoped>
.movie-list {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter {
  margin-bottom: 20px;
  max-width: 300px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
</style>